<template>
    <view>
        <view :style="navBarStyle" class="nav">
            <view :style="statusBarStyle"></view>
            <view :style="contentStyle" class="overflow-hidden">
                <!-- 与胶囊对齐 -->
                <view :style="boxStyle" class="flex">
                    <!-- 左侧 -->
                    <view :style="[boxLeftStyle, isCapsule && boxLeftIsCapsule]">
                        <slot name="left">
                            <view class="flex">
                                <!-- 胶囊 -->
                                <template v-if="isCapsule">
                                    <view class="iconfont flex-1 text-center cursor-pointer" :class="leftIcon"></view>
                                    <view class="text-gray-400">|</view>
                                    <view class="iconfont flex-1 text-center cursor-pointer" :class="rightIcon"></view>
                                </template>

                                <template v-else>
                                    <view style="width: 64rpx; text-align: center" @click="backOrHome">
                                        <view class="iconfont icon-left text-36" v-if="pages.length > 1"></view>
                                        <view class="iconfont icon-shouye text-36" v-else></view>
                                    </view>
                                </template>
                            </view>
                        </slot>
                    </view>
                    <!-- 中间 -->
                    <view class="flex-1 mx-20 text-center">
                        <slot></slot>
                    </view>
                    <!-- 右侧占位 -->
                    <view :style="boxLeftStyle"></view>
                </view>
            </view>
        </view>

        <view :style="navBarStyle"></view>
    </view>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeMount } from 'vue'
import { useSystem } from '@/hooks/system'
import { addUnit } from '@/utils/common'

const props = defineProps({
    backgroundColor: {
        type: String,
        default: '#fff',
    },

    // 是否是一个胶囊
    isCapsule: {
        type: Boolean,
        default: false,
    },

    // 左侧宽度
    leftWidth: {
        type: String,
    },

    // 左侧icon
    leftIcon: {
        type: String,
    },
    // 右侧icon
    rightIcon: {
        type: String,
    },
})

const { statusBarHeight, contentHeight, capsule } = useSystem()

// 整体navBar样式
const navBarStyle = computed(() => {
    return {
        height: `${statusBarHeight.value + contentHeight.value}px`,
        backgroundColor: props.backgroundColor,
    }
})

// 状态栏栏样式
const statusBarStyle = computed(() => {
    return {
        height: `${statusBarHeight.value}px`,
        backgroundColor: props.backgroundColor,
    }
})

// 内容栏样式
const contentStyle = computed(() => {
    return {
        height: `${contentHeight.value}px`,
        backgroundColor: props.backgroundColor,
    }
})

// 内容栏样式内的box
const boxStyle = computed(() => {
    return {
        marginTop: `${capsule.top - statusBarHeight.value}px`,
        marginLeft: `calc(100% - ${capsule.right}px)`,
        marginRight: `calc(100% - ${capsule.right}px)`,
        height: `${capsule.height}px`,
        lineHeight: `${capsule.height}px`,
    }
})
// box - 左侧
const boxLeftStyle = computed(() => {
    return {
        width: props.leftWidth ? addUnit(props.leftWidth) : `${capsule.width}px`,
        height: `${capsule.height}px`,
        lineHeight: `${capsule.height}px`,
    }
})
// box - 左侧是否是胶囊
const boxLeftIsCapsule = computed(() => {
    return {
        borderRadius: `30rpx`,
        backgroundColor: '#DDEADE',
    }
})

// 页面栈数量
const pages = ref(getCurrentPages())

function backOrHome() {
    if (pages.length > 1) {
        uni.navigateBack({
            delta: 1,
        })
    } else {
        uni.switchTab({
            url: '/pages/index/index',
        })
    }
}
</script>

<script>
export default {
    options: {
        styleIsolation: 'shared', // 解除样式隔离
        virtualHost: true,
    },
}
</script>

<style lang="scss" scoped>
.nav {
    position: fixed;
    width: 100%;
    top: 0%;
    left: 0%;
    z-index: 2;
}
</style>
